{% stylesheet %}

.block_collection .block_collection_items ul {
    display: grid;
    row-gap: 30px;
    column-gap: 30px;
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_collection .block_collection_items_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection .block_collection_items_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
}
.block_collection .block_collection_items_6 ul {
    grid-template-columns: repeat(6, calc(16.6666% - 25px));
}

.block_collection .block_collection_items li {
    list-style-type: none;
}

.block_collection .block_collection_content {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.block_collection .block_collection_content .block_collection_pic{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s;
}
.block_collection .block_collection_content .block_collection_pic:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: #ffffff01;
    pointer-events: none;
    transition: all .2s ease;
    border-radius: 50%;
}
.block_collection .block_collection_content .block_collection_pic:hover:after{
    background: none;

}
.block_collection .block_collection_content .block_collection_pic:hover{
    box-shadow: 0 3px 10px #ffffff01;
    transform: translateY(-3px);
}
.block_collection .block_collection_content img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    
}



.block_collection .block_collection_name {
    text-align: center;
    margin-top: 15px;
}

.block_collection .block_collection_more {
    margin-top: calc(var(--general_layout_spacing) * 0.5);
    text-align: center;
}

.block_collection .block_collection_more a {
    margin: 0;
}

@media (max-width: 768px) {
    .block_collection .block_collection_items ul {
        row-gap: 30px;
        column-gap: 30px;
        grid-template-columns: repeat(3, calc(33.3333% - 20px));
    }
}

@media (max-width: 767px) {
    .block_collection .block_collection_items ul {
        row-gap: 14px;
        column-gap: 14px;
        grid-template-columns: repeat(2, calc(50% - 7px));
    }
    .block_collection .block_collection_name{
        font-size: 16px;
    }
}
{% endstylesheet %}
<div class="block_collection" id="block_collection_{{ block.id }}"> 
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail|html_content_filter }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_collection_items block_collection_items_{{ section.settings.pc_number }}">
            <ul class="grid-warp" style="--template-columns:{{ section.settings.pc_number }};--grid-column:30px;--grid-row:30px">
              {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}
                {% if section.blocks.size %}


                {% get_collections ids={collection_ids} limit=100 collection_image=1 %}
                {% for block in section.blocks %}
                {% assign id = block.collection.id %}

                {% if collections[id].size > 1 %}
                  {% assign collection = collections[id] %}
                  <li>
                    <a class="block_collection_content" href="/collections/{{ collection.handle }}">
                        <div class="block_collection_pic">
													{%- if collection.image_alt == "" -%}
														{% assign collection_alt = collection | image_alt:'collection'   %}
													{%- else -%}
														{% assign collection_alt = collection.image_alt %}
													{%- endif -%}
      {% include 'lazy_img', src:collection.src,  alt:collection_alt %}

                        </div>
						{% if section.settings.show_title %}
                        <div class="block_collection_name">{{ collection.title }}</div>
						{% endif %}
                    </a>
                </li>
                {% else %}
                <li>
                    <a href="javascript:;" data-tips="Please select an album" class="block_collection_content">
                        <div class="block_collection_pic"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
						{% if section.settings.show_title %}
                        <div class="block_collection_name">Example Collection Title</div>
						{% endif %}
                    </a>
                </li>
                {% endif %}
                
                {% endfor %}

                {% else %}
                {% for i in (1..section.settings.pc_number) %}
                  <li>
                    <a href="javascript:;" data-tips="Please select an album" class="block_collection_content">
                        <div class="block_collection_pic"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
						{% if section.settings.show_title %}
                        <div class="block_collection_name">Example Collection Title</div>
						{% endif %}
                    </a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            {% if section.settings.more_text !='' %}
            <div class="block_collection_more"><a class="secondary_btn" href="/collections">{{ section.settings.more_text }}</a></div>
            {% endif %}
        </div>
    </div>
</div>
 <script type="text/javascript">
  var _w = $('.block_collection_items').find('li').width();
  $('.block_collection_pic').css('height', _w);
</script>
{% schema %}
{
	"tag": "section",
	"class": "block_collection",
	"is_global": false,
	"name": {
		"zh_CN": "专辑列表",
		"en_US": "Collection list"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Collection List"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Collection Detail"
		},
		{
			"type": "card_switch",
			"label": {
			  "zh_CN": "显示专辑标题",
			  "en_US": "Show collection title"
			},
			"default": true,
			"id": "show_title"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill",
			"default": "false"
		},
		{
			"type": "card_slider",
			"id": "pc_number",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"default": "3"
		},
		{
			"type": "card_input",
			"id": "more_text",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "选择专辑",
				"en_US": "Select collection"
			},
			"type": "collection-item",
			"settings": [
				{
					"type": "card_collection",
					"label": {
						"zh_CN": "专辑",
						"en_US": "Collection"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "collection"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Collection List",
			"detail": "",
			"show_title": true,
			"is_fill": false,
			"pc_number": 6,
			"more_text": ""
		},
		"blocks": [
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			},
			{
				"collection": {
					"id": "",
					"title": ""
				},
				"block_type": "collection-item"
			}
		]
	}
}
{% endschema %}